<template>
  <div class="zs">
    <h2>雷达歌单</h2>
    <span class="desc">根据你的红心收藏为你推荐更多的宝藏歌曲</span>
    <ul >
      <li v-for="i in songlist" :key="i.id" @click="togd(i.id)">
        <span class="playCount"> <i class="el-icon-caret-right"></i> {{getPlayCount(i.playCount)}}</span>
        <div><img v-lazy="i.picUrl" alt=""></div>
        <div class="name">{{i.name}}</div>
      </li>
     
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songlist: [],
    };
  },
  methods:{
   togd(id){
      this.$router.push({name:'songlist',query:{id:id}})
    }
  },
  computed:{
     getPlayCount() {
      return function (count) {
        if (count >= 10000) {
          count = parseInt(count / 10000);
          return count + "万";
        } else {
          return count;
        }
      };
    }
  },
  mounted() {
    this.$request({
      url: "/personalized?limit=24",
      withCredentials: true,
    }).then(success=>{
      this.songlist=success.data.result
    });
  },
};
</script>

<style scoped>
h2{
  margin-bottom: 20px;
}
.desc{
  color: gray;
}
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
ul li {
  position: relative;
  width: 150px;
  border-radius: 10px;
  margin-bottom: 20px;
}
img{
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.name{
  margin-top: 10px;
}
.playCount{
  position: absolute;
  right: 10px;
  top:5px;
  color: white;
  font-size: 13px;
}
</style>